<template>
  <div class="example-warp-card">
    <div class="card-head display-flex flex-align">
      <span class="title">
        <slot name="title"></slot>
      </span>
    </div>
    <div class="card-body">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'CoreExampleCard'
})
</script>

<style scoped lang="scss">
.example-warp-card {
  background-color: var(--core-bg-color-03);
  border: 1px solid var(--core-border-color-01);
  border-radius: 10px;

  .card-head {
    height: 56px;
    padding: 0 24px;
    border-bottom: 1px solid var(--core-border-color-01);

    .title {
      font-weight: 600;
      color: var(--core-text-color-02);
      opacity: 0.88;
    }
  }

  .card-body {
    padding: 24px;
  }
}
</style>
